<template>
    <view class="content">
        <view class="item">
            <image :src="url" class="img"></image>
            <view class="btn" @click="show = true">分享</view>
        </view>
        
        <!-- 分享弹窗 -->
        <u-popup v-model="show" mode="bottom" border-radius="20" height="350rpx">
            <view class="pop-box">
                <view class="pop-top">
                    <view @click="toShare(1)">
                        <image src="../../static/icon/weixin.png" class="pop-icon"></image>
                        <view>分享好友</view>
                    </view>
                    <view @click="toShare(2)">
                        <image src="../../static/icon/pyq.png" class="pop-icon"></image>
                        <view>分享朋友圈</view>
                    </view>
                </view>
                <view class="pop-close" @click="show = false">关闭</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                data: {},
                id: '',
                ids: '',
                url: '',
            };
        },
        onLoad(option) {
            if (option.id) {
                this.id = option.id
                this.ids = option.ids
                this.getData()
                this.getShareImg()
            }
        },
        methods: {
            // 分享
            toShare(num) {
                uni.setClipboardData({
                    data: this.data.data,
                    success: function() {
                        console.log('success');
                        uni.showToast({
                            title: '文案已复制',
                            duration: 2000
                        });
                    }
                });
                
                this.show = false
                // 1好友 2朋友圈
                let type = ''
                if (num == 1) type = 'WXSceneSession'
                if (num == 2) type = 'WXSceneTimeline'
                uni.share({
                	provider: "weixin",
                	scene: `${type}`,
                	type: 2,
                	href: `https://app.qyjifangtong.com/header/h5/#/pages/index/floor-details?id=${this.id}&share=${1}`,
                	title: this.data.name,
                	imageUrl: this.url,
                	success: (res) => {
                		console.log("success:" + JSON.stringify(res));
                        this.isShare()
                	},
                	fail: (err) => {
                		console.log("fail:" + JSON.stringify(err));
                	}
                });
            },
            
            isShare() {
                this.$ajax('user_share', {
                    user_token: this.$getSync('userToken'),
                    type: 2,//1公告 2楼盘
                    id: this.id,//分享id
                }).then(ret => {
                    if (ret.success == 1000) {
                        
                    } else {
                        
                    }
                });
            },
            
            // 获取海报
            getShareImg() {
				uni.showLoading({
				    title: '海报加载中'
				});
                this.$ajax('share_image', {
                    user_token: this.$getSync('userToken'),
                    pro_id: this.id,//楼盘id
                    image_ids: this.ids,
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.url = ret.detail.url
						uni.hideLoading();
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            // 获取楼盘信息
            getData() {
                this.$ajax('properties_detail', {
                    user_token: this.$getSync('userToken'),
                    id: this.id,//楼盘id
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.data = ret.detail
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 0 30rpx 30rpx;
    }
    .wrapper{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
    }
    .item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .img{
        width: 700rpx;
        height: 1259rpx;
    }
    .btn{
        color: #fff;
        font-size: 30rpx;
        margin: 20rpx 0 30rpx;
        padding: 15rpx 200rpx;
        text-align: center;
        background-color: #00a1e9;
        border-radius: 15rpx;
    }
    
    // 分享弹窗
    .pop-box{
        background-color: #f5f5f5;
        width: 100vw;
    }
    .pop-top{
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 50rpx 0 35rpx;
    }
    .pop-top>view{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        color: #424d5a;
    }
    // .pop-top>view:first-child{
    //     padding-right: 130rpx;
    // }
    .pop-icon{
        width: 104rpx;
        height: 104rpx;
        margin-bottom: 15rpx;
    }
    .hb-icon{
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 15rpx;
    }
    .pop-close{
        font-size: 28rpx;
        color: #424d5a;
        padding: 30rpx 0;
        border-top: 2rpx solid #e6e6e6;
        text-align: center;
    }

</style>
